<template>
  <view class="notification-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <text class="header-title">通知</text>
    </view>
    
    <!-- 通知类型切换 -->
    <view class="tab-bar">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="['tab-item', currentTab === index ? 'active' : '']"
        @tap="switchTab(index)"
      >
        <text>{{ tab }}</text>
      </view>
    </view>
    
    <!-- 通知列表 -->
    <scroll-view 
      scroll-y 
      class="notification-list"
      @scrolltolower="loadMore"
    >
      <view 
        v-for="(item, index) in notice" 
        :key="index"
        class="notification-item"
        @tap="goToDetail(item)"
		v-if="currentTab == 0"
      >
        <view class="notification-dot" v-if="!item.isRead"></view>
        <image class="notification-icon" :src="item.icon" mode="aspectFit"></image>
        <view class="notification-content">
          <view class="notification-title">{{ item.noticeTitle }}</view>
          <!-- <view class="notification-desc"><rich-text :nodes="item.noticeContent" /></view> -->
          <view class="notification-time">{{ item.createTime }}</view>
        </view>
      </view>
	  
	  <!-- 公告列表 -->
	    <view v-if="currentTab == 1" 
	      v-for="(item, index) in gonggao" 
	      :key="index"
	      class="notification-item"
	      @tap="goToDetail(item)"
	    >
	      <view class="notification-dot" v-if="!item.isRead"></view>
	      <image class="notification-icon" :src="item.icon" mode="aspectFit"></image>
	      <view class="notification-content">
	        <view class="notification-title">{{ item.noticeTitle }}</view>
	        <!-- <view class="notification-desc"><mp-html :content="item.noticeContent" /></view> -->
	        <view class="notification-time">{{ item.createTime }}</view>
	      </view>
	    </view>
      
      <!-- 加载更多 -->
      <view class="loading" v-if="isLoading">
        <text>加载中...</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
	import {getNoticeList,getGongGaoList} from '@/api/notification.js'
export default {
  data() {
    return {
      tabs: ['通知', '公告'],
      currentTab: 0,
      notificationList: [],
	  notice:[],//通知
	  gonggao:[],//公告
      page: 1,
      isLoading: false
    }
  },
  onLoad() {
    this.getNotificationList()
	this.getPublicGaoList();
  },
  filters: {
  	/**
  	 * 处理富文本里的图片宽度自适应
  	 * 1.去掉img标签里的style、width、height属性
  	 * 2.img标签添加style属性：max-width:100%;height:auto
  	 * 3.修改所有style里的width属性为max-width:100%
  	 * 4.去掉<br/>标签
  	 * @param html
  	 * @returns {void|string|*}
  	 * 
  	 */
  	formatRichText(html) { //控制小程序中图片大小
  		let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
  			match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
  			match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
  			match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
  			return match;
  		});
  		newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
  			match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
  				'max-width:100%;');
  			return match;
  		});
  		newContent = newContent.replace(/<br[^>]*\/>/gi, '');
  		newContent = newContent.replace(/\<img/gi,
  			// '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src="https://syqdxs.sdeesp.com');
  			'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
  		return newContent;
  	}
  },
  methods: {
    // 切换标签
    switchTab(index) {
		// console.log("switchTab",index)
      this.currentTab = index
      this.page = 1
	  if(index==0){
		  this.notice = []
		  this.getNotificationList()
	  }else{
		  this.gonggao = []
		  this.getPublicGaoList()
	  }
    },
    
    // 获取通知列表
	getNotificationList(){
		getNoticeList().then(res =>{
			this.isLoading = true
			if (res.code == 200) {
				this.notice = res.data;
				// console.log("通知:",this.notice)
			}else{
				uni.showToast({
				  title: '获取通知失败',
				  icon: 'none'
				})
			}
			this.isLoading = false
		});
	},
	// 获取公告列表
	getPublicGaoList(){
		getGongGaoList().then(res =>{
			this.isLoading = true
			if (res.code == 200) {
				this.gonggao = res.data;
				// console.log("通知:",this.gonggao)
			}else{
				uni.showToast({
				  title: '获取通知失败',
				  icon: 'none'
				})
			}
			this.isLoading = false
		});
	},
    
    // 加载更多
    loadMore() {
      if (this.isLoading) return
      this.page++
      this.getNotificationList()
	  this.getPublicGaoList();
    },
    
    // 跳转到详情页
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/notification/detail?id=${item.noticeId}`
      })
    },
  }
}
</script>

<style>
.notification-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  height: 44px;
  background: linear-gradient(to right, #8B5CF6, #7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.header-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.tab-bar {
  display: flex;
  background-color: #fff;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.tab-item.active {
  color: #8B5CF6;
  font-weight: 500;
}

.notification-list {
  height: calc(100vh - 100px);
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  background-color: #fff;
  margin-bottom: 1px;
  position: relative;
}

.notification-dot {
  position: absolute;
  top: 20px;
  left: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff4d4f;
}

.notification-icon {
  width: 40px;
  height: 40px;
  margin-right: 12px;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-size: 15px;
  color: #333;
  margin-bottom: 4px;
}

.notification-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.notification-time {
  font-size: 12px;
  color: #999;
}

.loading {
  text-align: center;
  padding: 16px;
  color: #999;
}
</style>